<template>
	<view class="search-box">
		<uni-icons @click="back" type="arrowleft" :size="backIconSize" :color="backIconColor" />
		<view class="input-box">
			<input v-model="value" type="text" @click="handleClick" :adjust-position="true" :placeholder="placeholder"
				@input="inputChange" @confirm="toList()" placeholder-class="placeholder-class" confirm-type="search">
		</view>
		<view v-if="showRightBtn" class="search-btn" @tap="toSearch">搜索</view>
		<view v-else class="right-btn">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-search-header",
		props: {
			value: '',
			backIcon: {
				type: String,
				default: 'arrowleft'
			},
			backIconSize: {
				type: String | Number,
				default: '25'
			},
			backIconColor: {
				type: String,
				default: '#252525'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			inputConfig: {
				type: Object,
				default: () => {}
			},
			showRightBtn: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {};
		},
		methods: {
			back() {
				this.$emit('back')
			},
			handleClick() {
				this.$emit('click')
			},
			inputChange(e) {
				console.log(e)
				this.$emit('input',e)
			},
			toSearch() {
				this.$emit('search')
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		align-items: center;
		z-index: 99999;
		width: 100%;
		height: 90rpx;
		background-color: white;
		// background-color: rgb(242, 242, 242);
		padding: 0 2.5%;
		display: flex;
		justify-content: space-between;
		position: sticky;
		border-bottom: 1rpx solid #e2e2e2;
		top: 0;
	}

	.search-box .mSearch-input-box {
		width: 100%;
	}

	.search-box .input-box {
		flex: 1;
		margin-left: 10rpx;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .right-btn {
		margin: 0 0 0 2%;
	}

	.search-box .search-btn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 26upx;
		color: #fff;
		background: linear-gradient(to right, rgba(#E5001D, 0.8), rgba(#C70019, 0.8));
		border-radius: 60upx;
	}

	.search-box .input-box>input {
		width: 100%;
		height: 60upx;
		font-size: 26upx;
		border: 0;
		border-radius: 60upx;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 30rpx;
		margin: 0;
		background-color: rgb(242, 242, 242);
	}

	.placeholder-class {
		color: #9e9e9e;
	}
</style>
